{% extends "master.html" %}
{% load common_extras %}
{% block head_ext %}
<script type="text/javascript" src="/site_media/js/rpc.js"></script>
<script type="text/javascript" src="/site_media/js/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/site_media/js/jquery/ui/ui.dialog.js"></script>
<link rel="stylesheet" href="/site_media/js/jquery/ui/themes/flora/flora.all.css" type="text/css" media="screen" title="no title" />
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<script type="text/javascript">
     
  service = new rpc.ServiceProxy("/services/admin/", {asynchronous:false, methods: ['add_page','edit_page','delete_page']});
  
  $(document).ready(function(){
   
	genPageLinks({{total}}, {{pagesize}});
	
	$('input.addpage').click(function(){
	     $("#add_dialog").show().dialog({
		     height: 230, width: 330, modal: true,
	         title: '页面添加',
		     overlay: {
                opacity: 0.5, 
                background: "black" 
             }
	     });
	});
	
    $('#add_form input.button').click(function(){
        var pagename =  $('#pagename').val();
	    if(!pagename){
		   alert("请输入页面名称");
		}else{
		    try{
		    	service.add_page({'page_name': pagename});
	           	window.location.reload() ;
			}catch(e){
			   alert(e.message);
			}
	    }
	});
	 
    //删除
    $('a.del').click(function() {
    	if(confirm('确定删除此类型吗?')){
    		var id = $(this).parent().parent().attr('id');
    		service.delete_page({'id':id,'delete':true});
    		window.location.reload();
    	}
    });
    
    $('a.edit').click(function() {
    	var id = $(this).parent().parent().attr('id');
    	var name = $(this).parent().parent().attr('name');
    	$("#update_page_name").val(name);
    	$("#update_id").val(id);
    	$("#update_dialog").show().dialog({
		     height: 230, width: 330, modal: true,
	         title: '页面添加',
		     overlay: {
               opacity: 0.5, 
               background: "black" 
            }
	     });
    });
    
    //修改
    $('#update_form input.button').click(function(){
        var pagename =  $('#update_page_name').val();
        var id = $("#update_id").val();
	    if(!pagename){
		   alert("请输入页面名称");
		}else{
		    try{
		    	service.edit_page({'id':id,'edit':true,'page_name':pagename});
	           	window.location.reload() ;
			}catch(e){
			   alert(e.message);
			}
	    }
	});
 });
  
</script>
{% endblock %}
{% block title %}页面管理{% endblock %}
{% block content %}
<input type="button" class="addpage" value="添加页面"/>
<table cellspacing="1" class="tablesorter">
  <thead>
    <th>ID </th>
    <th>页面管理</th>
    <th>编辑</th>
    <th>删除</th>
  </thead>
  <tbody>
    {% if infos %}
      {% for info in infos %}
       <tr id="{{info.id}}" name="{{info.name}}">
         <td>{{ info.id }}</td>
         <td>{{ info.name }}</td>
         <td><a href="javascript:void(0)" class="edit">编辑</a></td>
         <td><a href="javascript:void(0)" class="del">删除</a></td>
       </tr>
      {% endfor %}
    {% endif %}
     <tr style="display:none"><td id="pageLink" colspan="12"></td></tr>
  </tbody>
</table>
<div id="add_dialog" class="flora" style="display: none;">
    <form id="add_form">
    	<p>
    		<label>页面名称:</label>
			<span><input id="pagename" type="text" value=""/></span>
	    </p>
	
	    <br> 
		<input class="button" type="button" value="提交" />
    </form>
</div>

<div id="update_dialog" class="flora" style="display: none;">
    <form id="update_form">
    	<p>
    		<label>页面名称:</label>
    		<input type="hidden" value="" id="update_id" name="update_id" />
			<span><input id="update_page_name" name="update_page_name" type="text" value=""/></span>
	    </p>
	
	    <br> 
		<input class="button" type="button" value="提交" />
    </form>
</div>
{% endblock %}